<!DOCTYPE html>
<!-- saved from url=(0076)http://techbrood.com/threejs/docs/api/constants/CustomBlendingEquations.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		
		<!--<base href="../../">--><base href=".">
		<script src="./list.js(1).下载"></script>
		<script src="./page.js.下载"></script>
		<link type="text/css" rel="stylesheet" href="./page.css">
	<link href="./prettify.css" rel="stylesheet"><link href="./threejs.css" rel="stylesheet"><script src="./prettify.js.下载"></script></head>
	<body>
		<h1>自定义混合方程常量（Custom Blending Equation Constants）</h1>
        <p>这里定义的一些常量，用于混合（blend）效果的处理。</p>
        <p class="info">所谓<strong>混合</strong>就是在绘制时，不是直接把新的颜色覆盖在原来旧的颜色上，而是将新的颜色与旧的颜色经过一定的运算，获得最终的混合颜色。<br>
其中新的颜色被称为<strong>源颜色</strong>，旧的颜色称为<strong>目标颜色</strong>。传统意义上的混合，是将源颜色乘以源因子，目标颜色乘以目标因子，然后相加。<br>
源因子和目标因子设置的不同直接导致混合结果的不同。<br>
下面用数学公式来表达一下这个运算方式。假设源颜色的四个分量（指红色，绿色，蓝色，alpha值）是(Rs, Gs, Bs,  As)，目标颜色的四个分量是(Rd, Gd, Bd, Ad)，<br>
又设源因子为(Sr, Sg, Sb, Sa)，目标因子为(Dr, Dg, Db,  Da)。则混合产生的新颜色可以表示为：<br>
<code class=" prettyprint"><span class="pun">(</span><span class="typ">RsSr</span><span class="pun">+</span><span class="typ">RdDr</span><span class="pun">,</span><span class="pln"> </span><span class="typ">GsSg</span><span class="pun">+</span><span class="typ">GdDg</span><span class="pun">,</span><span class="pln"> </span><span class="typ">BsSb</span><span class="pun">+</span><span class="typ">BdDb</span><span class="pun">,</span><span class="pln"> </span><span class="typ">AsSa</span><span class="pun">+</span><span class="typ">AdDa</span><span class="pun">)</span></code>
如果颜色的某一分量超过了1.0，则它会被自动截取为1.0，不应出现越界。</p>
        
		<h2>方程（Equations）</h2>
        <p>这个用于指定在处理混合（blend）效果时使用何种类型的方程式。</p>
		<div>
		加法方程（THREE.AddEquation）<br>
		减法方程（THREE.SubtractEquation）<br>
		反向减法方程（THREE.ReverseSubtractEquation）<br>
		最小方程（THREE.MinEquation）<br>
		最大方程（THREE.MaxEquation）
		</div>        
        <p>上述这些常量对应于源代码中的枚举值，要理解其具体含义，我们得了解GL混合方程式定义：</p>
        <code class=" prettyprint"><span class="pln">glBlendEquation</span><span class="pun">(</span><span class="typ">GLenum</span><span class="pln"> mode</span><span class="pun">);</span></code>
        <p>其中GLenum mode可取值见下表：</p>
        <table border="1" width="500" cellspacing="1" cellpadding="1">
            <tbody>
                <tr>
                    <td>
                        GL_FUNC_ADD
                    </td>
                    <td>
                        Cf = (Cs * S)+(Cd * D)
                    </td>
                </tr>
                <tr>
                    <td>
                        GL_FUNC_SUBTRACT
                    </td>
                    <td>
                        Cf = (Cs * S)-(Cd * D)
                    </td>
                </tr>
                <tr>
                    <td>
                        GL_FUNC_RESERSE_SUBTRACT
                    </td>
                    <td>
                        Cf = (Cd * D)-(Cs * S)
                    </td>
                </tr>
                <tr>
                    <td>
                        GL_MIN
                    </td>
                    <td>
                        Cf = min(Cs,Cd)
                    </td>
                </tr>
                <tr>
                    <td>
                        GL_MAX
                    </td>
                    <td>
                        Cf = max(Cs,Cd)
                    </td>
                </tr>
            </tbody>
        </table>
        <p>其中：</p>
        <ul><li>Cf表示混合后显示的颜色</li>
            <li>Cd混合前颜色缓冲中已经有的颜色值</li>
            <li>Cs将要绘制的颜色</li>
            <li>S为glBlendFunc函数设置时的第一个参数,源颜色因子</li>
            <li>D为glBlendFunc函数设置时的第二个参数,目标颜色因子</li>
        </ul>

		<h2>目标因子（Destination Factors）</h2>
        <p>自定义混合模式目标颜色因子</p>    
		<div>
		THREE.ZeroFactor：对应于GL_ZERO，表示使用0.0作为因子，实际上相当于不使用这种颜色参与混合运算<br>
		THREE.OneFactor：GL_ONE，表示使用1.0作为因子，实际上相当于完全的使用了这种颜色参与混合运算<br>
		THREE.SrcColorFactor：GL_SRC_COLOR，表示使用源颜色的四个分量分别作为因子的四个分量<br>
		THREE.OneMinusSrcColorFactor：GL_ONE_MINUS_SRC_COLOR，表示使用1.0减去源颜色的四个分量分别作为因子的四个分量<br>
		THREE.SrcAlphaFactor：GL_SRC_ALPHA，表示使用源颜色的alpha值来作为因子。<br>
		THREE.OneMinusSrcAlphaFactor：GL_ONE_MINUS_SRC_ALPHA，表示用1.0减去源颜色的alpha值来作为因子。<br>
		THREE.DstAlphaFactor：GL_DST_ALPHA，表示使用目标颜色的alpha值来作为因子。<br>
		THREE.OneMinusDstAlphaFactor：GL_ONE_MINUS_DST_ALPHA，表示用1.0减去目标颜色的alpha值来作为因子。
		</div>

		<h2>源因子（Source Factors）</h2>
		<div>
		THREE.DstColorFactor：对应于GL_DST_COLOR，表示使用目标颜色的四个分量分别作为因子的四个分量。<br>
		THREE.OneMinusDstColorFactor：GL_ONE_MINUS_DST_COLOR  表示使用1.0减去目标颜色的四个分量分别作为因子的四个分量。<br>
		THREE.SrcAlphaSaturateFactor：GL_SRC_ALPHA_SATURATE  表示源颜色的alpha 值和RGB值采用不同的混合因子。
		</div>
        <p>源因子和目标因子是可以通过glBlendFunc函数来进行设置的。glBlendFunc有两个参数，前者表示源因子，后者表示目标因子。<br>
        举例而言，如果设置了：<code class=" prettyprint"><span class="pln">glBlendFunc</span><span class="pun">(</span><span class="pln">GL_ONE</span><span class="pun">,</span><span class="pln"> GL_ZERO</span><span class="pun">);</span></code>，则表示完全使用源颜色，完全不使用目标颜色，因此画面效果和不使用混合的时候一致。<br>
        如果设置了：<code class=" prettyprint"><span class="pln">glBlendFunc</span><span class="pun">(</span><span class="pln">GL_SRC_ALPHA</span><span class="pun">,</span><span class="pln"> GL_ONE_MINUS_SRC_ALPHA</span><span class="pun">);</span></code>，则表示源颜色乘以自身的alpha 值，目标颜色乘以1.0减去源颜色的alpha值，<br>
        这样一来，源颜色的alpha值越大，则产生的新颜色中源颜色所占比例就越大，而目标颜色所占比例则减小。<br>
        这种情况下，我们可以简单的将源颜色的alpha值理解为“不透明度”。这也是混合时最常用的方式。</p>
        
        <p>更为详尽的描述，请参考如下技术规范：<br>
1. https://www.khronos.org/registry/webgl/specs/latest/1.0/#6.13<br>
2. https://www.opengl.org/registry/specs/EXT/blend_color.txt</p>
        
		<h2>源代码</h2>

		<a href="https://github.com/mrdoob/three.js/blob/master/src/Three.js" target="_blank">src/Three.js</a>
	

</body></html>